<template lang="pug">
	.user-info-wrap(:style="{'padding-top':modePadding}")
		.info-box
			.wrap1
				.header-img-box
					img(:src="data.img")
				.text-box
					.user-name {{data.name}}
					.line-two {{data.line2}}
			.set-box(v-if='data.showSet') 设置
		.left-circle
		.right-circle
			div
				div(v-for="n in 9" :key = "n" )
					div
</template>
<script>
import wx from 'wx'

export default {
	data() {
		return {
			modePadding: ''
		}
	},
	props: {
		data: {
			type: Object,
			default() {
				return {
					showSet: false
				}
			}
		}
	},
	computed: {},
	mounted() {
		if (this.data.showSet) {
			this.modePadding = '10px'
		} else {
			this.modePadding = '100px'
		}
	},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {},
	components: {}
}
</script>

<style lang="stylus" scoped>
	.user-info-wrap
		background-color themeColor
		padding-left 84px
		padding-right 30px
		height 280px
		position relative
		overflow hidden
		box-sizing border-box
		.info-box
			position relative
			z-index 2
			display flex
			align-items center
			justify-content space-between
			.wrap1
				display flex
				align-items center
				.header-img-box
					width 108px
					height 108px
					border-radius 50%
					overflow hidden
					border 8px solid rgba(255,255,255,0.2)
					img
						width 100%
						height 100%
				.text-box
					color white
					margin-left 42px
					.user-name
						font-size 40px
						line-height 56px
					.line-two
						margin-top 8px
						font-size 24px
						line-height 34px
			.set-box
				color white
				font-size 24px
				line-height 34px
		.left-circle
			position absolute
			left -286px
			bottom  -360px
			width 572px
			height 572px
			border-radius 50%
			background-color #2782FB
			z-index 1
		.right-circle
			position absolute
			right -100px
			top 20px
			width 280px
			height 280px
			border-radius 50%
			background-color #1288FD
			z-index 1
			display flex
			justify-content center
			align-items center
			>div
				width 160px
				height 160px
				display flex
				justify-content space-between
				align-items center
				flex-wrap wrap
				>div
					width 33.3%
					height 33.3%
					display flex
					justify-content center
					align-items center
					>div
						width 50%
						height 50%
						background-color rgba(255,255,255,0.2)
						border-radius 50%
</style>
